<!--
        Copyright (c) 2023, LXMS (lxinet.cn).

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
  <a-modal
    v-model:open="open"
    :title="$route.meta.title"
    width="100%"
    wrap-class-name="full-modal"
    :closable="false"
    :footer="null"
    @ok="handleOk"
  >
    <div class="modalBtnBox">
      <div class="hrBtnBox">
        <a-button v-for="item in hrBtnTools" :key="item.prop" v-bind="item.props" @click="handleClick(item)">
          <template  v-if="item.icon" #icon>
            <component :is="item.icon"></component>
          </template>
          {{item.label}}
        </a-button>
      </div>

      <a-button v-for="item in headerTools" :key="item.prop" v-bind="item.props" @click="handleClick(item)">
        <template  v-if="item.icon" #icon>
          <component :is="item.icon"></component>
        </template>
        {{item.label}}
      </a-button>
    </div>
    <div class="modalCon">
      <div class="ltCon">
        <div class="leaderLine">材料目录</div>
        <div class="line" :class="tabActive===0?'active':''" @click="tabActive=0">
          <file-text-outlined/>
          <span class="startIcon">&#10045;</span>
          <span>委托交易明细</span>
        </div>
        <div class="line" :class="tabActive===1?'active':''" @click="tabActive=1">
          <file-text-outlined/>
          <span>附件</span>
        </div>
      </div>
      <div class="rtCon">
        <div class="leaderLine">{{$route.meta.title}}</div>
        <div class="leaderTitle">基础信息</div>
        <lx-form :formConfig="formConfig">
        </lx-form>
        <div class="leaderTitle">资产信息</div>
        <lx-table :columns="columns" :dataSource="dataSource" :ltTools="ltTools" :rtTools="rtTools">
          <template #action>
            <a-button type="link" size="small">编辑</a-button>
          </template>
        </lx-table>
      </div>
    </div>
  </a-modal>

</template>

<script>
  import lxForm from "@components/baseComponents/lxForm/index.vue"
  import lxTable from "@components/baseComponents/lxTable/index.vue"

  export default {
    name: "lxEditModal",
    components:{
      lxForm,
      lxTable
    },
    data() {
      return {
        open: false,
        tabActive:0,
        formConfig: [
          {
            component: "a-input",
            prop: "bt",
            label: "标题",
            prefix:"$",
            colProps:{
              span:24
            }
          },
          {
            component: "a-date-picker",
            prop: "rq",
            label: "申请日期",
            props:{
              disabled:true
            }
          },
          {
            component: "a-input",
            prop: "jbr",
            label: "经办人",
          },
          {
            component: "a-input",
            prop: "djbh",
            label: "单据编号",
            props:{
              disabled:true,
              placeholder:"自动生成"
            }
          },
          {
            component: "a-select",
            prop: "zzfa",
            label: "招租方案",
          },
        ],
        dataSource: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '3',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '4',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '5',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '6',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '7',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '8',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          }, {
            key: '9',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          }, {
            key: '10',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
        ],
        columns: [
          {
            title: '标题',
            key: 'name',
          },
          {
            title: '申请日期',
            key: 'age',
          },
          {
            title: '交易机构',
            key: 'address',
          }, {
            title: '方案名称',
            key: 'key',
          },
          {
            title: '操作',
            key: 'action',
            render: 'action',
            width:100,
          }
        ],
        ltTools:[
          {
            label: "关联资产",
            prop: "add",
            // icon:"PlusOutlined",
            props: {
              type: "primary" ,
              ghost:true,
              size:'small'

            },
          }
        ],
        rtTools:[
          {
            label: "批量删除",
            prop: "add",
            // icon:"PlusOutlined",
            props: {
              size:'small'
            },
          }, {
            label: "批量编辑",
            prop: "add",
            props: {
              size:'small'
            },
            // icon:"PlusOutlined",
          }, {
            label: "导出",
            prop: "add",
            props: {
              size:'small'
            },
            // icon:"PlusOutlined",
          }, {
            label: "打印",
            prop: "add",
            props: {
              size:'small'
            },
            // icon:"PlusOutlined",
          },
        ],
        hrBtnTools:[
          {
            label: "流程",
            prop: "add",
            // icon:"PlusOutlined",
            props: {
              type: "primary" ,
              ghost:true,

            },
          },
          {
            label: "双屏",
            prop: "add",
            // icon:"PlusOutlined",
            props: {
              type: "primary" ,
              ghost:true,

            },
          }
        ],
        headerTools:[
          {
            label: "取消",
            prop: "add",
          }, {
            label: "保存",
            prop: "cancel",
            props: {
              type: "primary" ,
              ghost:true,
            },
          }, {
            label: "提交",
            prop: "add",
            props: {
              type: "primary" ,

            },

          },
        ]


      };
    },
    methods: {
      handleClick(item){
        this.$emit("onClick")
        this.open=false;
      }

    },
    mounted() {
    }
  }
</script>

<style lang="less">
  .full-modal {
    background: #FFFFFF;
    overflow: hidden;
    .modalBtnBox{
      position: fixed;
      right: 10px;
      top:10px;
      text-align: right;
      .ant-btn{
        margin-right: 10px;
      }
      .hrBtnBox{
        display: inline-block;
        margin-right: 10px;
        &:after{
          content: "";
          width: 1px;
          height: 16px;
          background: #E0E0E1;
          position: absolute;
          top:6px;

        }
      }
    }
    .ant-modal {
      max-width: 100%;
      top: 0;
      margin: 0;
      .base-shadow(0px 3px 6px 0px rgba(180, 198, 221, 0.16));
      padding-bottom: 0;
      .ant-modal-header {
        background: rgba(255, 255, 255, 0.8);
        border: 0 none;
      }
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
      background: transparent;
      background: #f4f5f7;
      background-size: cover;
      &:before {
        content: "";
        position: fixed;
        width: 20px;
        background: rgba(255, 255, 255, 0.8);
        left: 0;
        top: 54px;
        bottom: 0;
      }
      &:after {
        content: "";
        position: fixed;
        width: 20px;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        right: 0;
        top: 54px;
        bottom: 0;
      }
    }
    .ant-modal-body {
      flex: 1;
      padding: 20px 40px 0 40px;
      height: calc(100% - 100px);
      overflow: hidden;
    }
    .modalCon {
      display: flex;
      height: 100%;
      .ltCon {
        width: 160px;
        height: 100%;
        background: #FFFFFF;
        border-right: 1px solid #D3DDF0;
        .base-radius(8px 0 0 0);
        padding: 10px;
        .leaderLine{
          font-weight: bold;
          padding-bottom: 10px;
        }
        .line{
          padding: 5px 10px;
          .base-radius(14px);
          margin-bottom: 10px;
          cursor: pointer;
          &:hover,
          &.active{
            background: #F4F6F9;
          }
          .anticon{
            display: inline-block;
            padding-right: 3px;
          }
          .startIcon{
            color: @error-color;
            font-size: 12px;
            display: inline-block;
            padding-right: 3px;
          }
        }
      }
      .rtCon {
        flex: 1;
        background: #F7FBFE;
        border: 2px solid #FFFFFF;
        padding: 0 10px;
        overflow: auto;
        .base-radius(0 8px 0 0);
        .leaderLine{
          text-align: center;
          font-weight: bold;
          padding: 10px;
        }
        .leaderTitle{
          font-weight: bold;
          padding-bottom: 16px;
        }
      }
    }
  }
</style>